<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
  <style>

    /*修改标题栏颜色*/
    .bar.bar-nav {
      background-color: #1FCA23;
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
    /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    #pull-left{
      display:inline-block;
      width: 1.5rem;
      padding-top:0.3rem;
      float: left;
    }
    #pull-left img{
      display: block;
      width: 100%;
    }
    #pull-title{
      display: inline-block;
      width: 8.0rem;
      height: 2.2rem;
      line-height: 2.2rem;
      float: left;
      margin-left: 30%;
      color: #fff;
      font-size: 16px;
    }
    /*主题颜色*/
   .themecolor{
     background-color: #1FCA23;
   }
    /*修改内容区背景色*/
    .content{
    	background:#fff;
    }
    #form{
      width: 100%;
      height: auto;
      float: left;
      margin-top:5%;  
     }
    .forgetphone{
      width: 100%;
      text-align: center;
      position: relative;
     }
     #forget_user{
      width: 80%;
      height:2.0rem;
      font-size: 14px;
      padding:3%;
      border:1px solid #cccbcb;
      border-radius: 4px;
     }
     #getcode{
       display:inline-block;
       font-size: 12px;
       color: #5f646e;
       padding: 0.1rem 0.3rem; 
       border:1px solid #ccc;
       text-align:center;
       border-radius: 2px;
       position: absolute;
       top:0.4rem;
       right: 12%;
     }
     .forget_pin{
      width: 100%;
      text-align: center;
     }
     #smscodeid{
      width: 80%;
      height:2.0rem;
      font-size: 14px;
      padding:3%;
      border:1px solid #cccbcb;
      border-radius: 4px;
     }
     
    #fgtbtn{
      display: block;
      width: 80%;
      height:2.0rem;
      line-height: 2.0rem;
      text-align: center;
      border-radius:3px;
      color:#fff;
      font-size: 14px;
      border:0;
      float: left;
      margin:4% 10%;
    }
    #remind_1{
      width: 80%;
      float: left;
      margin:2% 10%;
      font-size: 14px;
      color:#CD3333;
    }
    /*验证码倒计时*/
    #resetcode{
        border: 1px solid #ccc;
        color: #5f646e;
        font-size:12px;
        text-align: center;
        border-radius: 0.25rem;
        line-height: 1.25rem;
        box-sizing: border-box;
        padding: 0 .5rem;
        height: 1.35rem;
        position: absolute;
        right:2.2rem;
        top:0.34rem;
        display: none;
    }

  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
      <!-- 标题栏 -->
      <header class="bar bar-nav">
         <a href="#" id="pull-left" onclick="backclick()"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/back@2x.png"></a>
         <span id="pull-title">添加小孩</span>
      </header>
      <!-- 页面内容区域 -->
      <div class="content">
         <!-- 登录 -->
         <form action="" method="post" id="form" name="form">
             <div class="forgetphone">
               	<input type="text" name="" placeholder="学生手机号" id="forget_user">
                <a href="#" id="getcode" onclick="getcode()">获取验证码</a>
                <a href="#" id="resetcode"><span id="resettime">60</span><span>s后重新发送</span></a>
             </div>
             <p id="remind_1"></p>
             <div class="forget_pin">
                <input type="text" name="" placeholder="验证码" id="smscodeid">
             </div>
             <p id="remind_2"></p>
            
	         <!-- 登录按钮 -->
           <a href="#" id="fgtbtn" class="themecolor" onclick="clkbindstu()">确定</a>

         </form>

      </div>
    </div>
  </div>

  <!-- !-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/swiper/swiper.min.js"></script>
<script type="text/javascript">

  // 点击返回
  function backclick(){
     native_goto('local/finish');
  }
  
  function clickforget(){
    // 填写信息验证
    // 手机号验证
    $$('#forget_user').blur(function(){
        reg =/^1[3|4|5|7|8][0-9]\d{4,8}$/i;
       if( $$(this).val()=="") { 
           $$("#remind_1").html("手机号不能为空！");
           return false;
        }
        else if($$(this).val().length<11) {  
          $$("#remind_1").html("手机号输入为11位数字");
          return false;
        }
        else if(!reg.test($$("#forget_user").val())) { 
           $$("#remind_1").html("手机号或邮箱不存在!");
           return false;
        }
        else {
           $$("#remind_1").html("");
        }
    });

  }

  // 点击验证码触发倒计时
    function getcode(){
          getSmsCode();
           
    }
    //获取短信验证码
    function getSmsCode(){

      var mobile = $$("#forget_user").val();
      if(!isNotNull(mobile)){
          native_showdialog("手机号不能为空！");
          return;
      }
      var param = {}

      var url = 'apis/getCode?type=0&mobile='+mobile;
      net_request('get',url,param,codeSuccessCallBack,errorCallBack);
    }
    //短信验证码回调
    function codeSuccessCallBack(data){
      if (isNotNull(data)) {
        var databody = data.data;
        if (isNotNull(databody) && data.success) {
           // 按钮禁用，倒计时60s，60s后按钮可再次点击发送
                $$('#getcode').hide();
                $$("#resetcode").show();
                $$('#resettime').html('60');
                var resettime = 60;
                var timer = null;
                timer = setInterval(function(){
                  resettime -= 1;
                  if (resettime>0) {
                    $$('#resettime').html(resettime);
                  }else{
                    clearInterval(timer);
                    $$('#getcode').show();
                    $$('#resetcode').hide();
                  }
                },1000);

        }
      }
    }
  
  // 绑定验证
   function clkbindstu(){
    bindstu();
   }

  // 绑定接口
  function bindstu(){
      var mobile = $$('#forget_user').val();
      var smscode = $$('#smscodeid').val();

      if(!isNotNull(mobile)){
          native_showdialog("手机号不能为空！");
          return;
     }

      if(!isNotNull(smscode)){
          native_showdialog("验证码不能为空！");
          return;
      }

      var param = {}
      var url = 'apis/bindstu?stumobile='+mobile+'&smscode='+smscode;
      net_request('get',url,param,bindstuSuccessCallBack,errorCallBack);
  }

  function bindstuSuccessCallBack(data){
       if (isNotNull(data) && data.success) {

          native_goto('local/finish');
       }else{
         native_showdialog(data.message);
      }
  }
  
  // 失败函数回调
  function errorCallBack(data){

  }
 
  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/

  }	
    // 初始化
    $(function(){
      $.init();
      clickforget();
    });
  </script>
</body>
</html>